<template>
  <div style="width: 100%;">
    <div class="historybox bg" style="padding-bottom: 10px">
      <!--              环形图-->

      <div style="width: 100%; float: left">
        <h4 style="padding: 20px" class="colorin">状态统计图</h4>
        <pieCharts
          v-if="pieData.length > 0"
          :chartData="pieData"
          :height="'260px'"
        />
        <div style="width: 100%; float: left" class="pielegendbox">
          <p class="pielegend" v-for="(item, index) in pieData" :key="index">
            <span
              class="quan"
              :style="{ 'border-color': alarmStatues[index] }"
            ></span>
            <span  class="name colorin">{{ item.name }} </span>
            <span class="value"> {{ item.str || 0 }}小时</span>
          </p>
        </div>
      </div>
      <!--              环形图图例-->
      <!-- <div style="width: 40%; float: left" class="alarmhistorybox">
        <div
          class="alarmhistory"
          v-for="(item, index) in pieData1"
          :key="index"
        >
          <p class="value colorin" >
            {{ item.value }}{{ item.name.indexOf("时间") >= 0 ? "小时" : "个" }}
          </p>
          <p class="name">{{ item.name }}</p>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import pieCharts from "../pieCharts.vue";

export default {
  name: "index",
  components: {
    pieCharts,
  },
  props: {
    alarmStatues: {
      type: Array,
      default: () => ["#3FC529", "#FBC225", "#E2E7EE"],
    },
    AveNoAlarmTimeData: {
      type: Object,
      default: () => {},
    },
    StateTimePieData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    let moment = this.$Moment;
    return {
      userName: "",
      name: "",
      role: "",
      compId: "",
      dateType: 1,
      pieData: [
        { value: "0", name: "运行" },
        { value: "0", name: "待机" },
        {
          value: "0",
          name: "离线",
        },
      ],
      pieData1: [
        { value: 0, name: "开机时间" },
        { value: 0, name: "报警次数" },
        { value: 0, name: "平均无报警时间" },
      ],
      str: "小时",
    };
  },
  watch: {
    AveNoAlarmTimeData(val) {
      this.AveNoAlarmTimeDataIn(val);
    },
    StateTimePieData(val) {
      this.StateTimePieDataIn(val);
    },
  },
  methods: {
    AveNoAlarmTimeDataIn(val) {
      this.pieData1 = [
        { value: (val.time / 60).toFixed(2), name: "开机时间" },
        { value: val.count, name: "报警次数" },
        { value: (val.average / 60).toFixed(2), name: "平均无报警时间" },
      ];
    },
    onTabChange(key, type) {
      this[type] = key;
    },
    StateTimePieDataIn(val) {
      let all = val[1000] * 1 + val[3000] * 1 + val[4000] * 1;

      this.pieData = [
        {
          value: val[1000] ? ((val[1000] / all) * 100).toFixed(2) : 0,
          name: "运行",
          str: (val[1000] / 60).toFixed(2),
        },
        {
          value: val[3000] ? ((val[3000] / all) * 100).toFixed(2) : 0,
          name: "待机",
          str: (val[3000] / 60).toFixed(2),
        },
        {
          value: val[4000] ? ((val[4000] / all) * 100).toFixed(2) : 0,
          name: "离线",
          str: (val[4000] / 60).toFixed(2),
        },
      ];
    },
  },
};
</script>

<style scoped lang="less">
@import "../../index.less";
</style>
